<template>
  <!-- 忘记密码页面 -->
  <Vcode :show="Show" @success="success" @close="close" @fail="fail"></Vcode>
  <div class="login">
    <el-form
      ref="loginRef"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
    >
      <h3 class="title">忘记密码</h3>
      <el-form-item prop="phoneNumber">
        <div class="flex labelClass margin-bottom">
          <img
            class="iponeimg"
            src="../assets/images/login/手机号码.png"
            alt=""
          />
          <el-input
            :input-style="{
              boxShadow: 'none',
            }"
            v-model="loginForm.phoneNumber"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="手机号"
          />
        </div>
      </el-form-item>
      <el-form-item prop="smsCode">
        <div class="flex labelClass margin-bottom">
          <img
            class="iponeimg"
            src="../assets/images/login/验证码.png"
            alt=""
          />
          <div class="inputButton">
            <el-input
              :input-style="{
                boxShadow: 'none',
              }"
              v-model="loginForm.smsCode"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="验证码"
            />
            <el-button
              type="text"
              class="CodeButton"
              size="large"
              @click="giveCode"
              :disabled="num != 0"
              >{{ num == 0 ? "获取验证码" : `${num}秒后重新发送` }}</el-button
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item style="width: 100%; margin-top: 55px">
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          style="width: 100%"
          @click.prevent="nextStep"
        >
          下一步
        </el-button>
        <div style="float: right" v-if="!register">
          <router-link class="link-type" :to="'/login'">登录</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!-- <p-dialog title="产品说的话zjx" width="55rem" v-model="isShowDialog">
        <img style="width: 100%; height: 100%" src="../assets/zjx.jpg" alt="" />
      </p-dialog> -->
  </div>
  <!--  底部  -->
  <div class="el-login-footer">
    <span>Sparke V1.0.0</span>
  </div>
</template>

<script setup>
import { getCodeAPI, checkSmsCodeAPI } from "@/api/system/user.js";
import Vcode from "vue3-puzzle-vcode";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from "@/store/modules/user";
// import * as THREE from '../../node_modules/three/src/Three.js'
// import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls'
// import Geometry from './index'
// import { FontLoader } from '../../node_modules/three/examples/jsm/loaders/FontLoader'
// import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls'
import ringTexture from "@/assets/logo/logo-03.png";
const to = () => {
  window.open("https://www.pureut.com/");
};

const userStore = useUserStore();
const router = useRouter();
const { proxy } = getCurrentInstance();
const Show = ref(false);
const loginForm = ref({
  phoneNumber: "",
  smsCode: "",
});
const loginRules = {
  phoneNumber: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  smsCode: [{ required: true, trigger: "blur", message: "请输入您的验证码" }],
};

const loading = ref(false);

const num = ref(0);
let timer = null;
//获取验证码
const giveCode = () => {
  const PHONE = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
  clearInterval(timer);
  if (!loginForm.value.phoneNumber) return proxy.warningMsg("请填写手机号!");
  if (!PHONE.test(loginForm.value.phoneNumber)) {
    return proxy.warningMsg("手机号格式错误!");
  }
  try {
    Show.value = true;
  } catch {
  } finally {
  }
};

// 用户通过了验证
const success = async (msg) => {
  console.log("成功了");
  Show.value = false;
  num.value = 60;
  timer = setInterval(() => {
    num.value--;
    if (num.value == 0) clearInterval(timer);
  }, 1000);
  await getCodeAPI({ phoneNumber: loginForm.value.phoneNumber });
};
// 用户点击遮罩层，应该关闭模态框
const close = () => {
  Show.value = false;
};
// 用户验证失败
const fail = () => {
  console.log("失败了");
  loading.value = false;
};

//下一步按钮
const nextStep = () => {
  proxy.$refs.loginRef.validate(async (valid) => {
    if (!valid) return proxy.warningMsg("请填写完整！");
    //验证验证码是否正确，如果后端返回code不是200return后端给的信息
    const res = await checkSmsCodeAPI({
      phoneNumber: loginForm.value.phoneNumber,
      smsCode: loginForm.value.smsCode,
    });
    if (res.code != 200) return proxy.warningMsg(`${res.msg}`);
    router.push(`/sureEditpwd?id=${loginForm.value.phoneNumber}`);
  });
};
</script>

<style lang="scss" scoped>
.labelClass {
  width: 100%;
  border-bottom: 0.0625rem solid #c8c8c8;
  margin-bottom: 1.625rem;
}

.margin-bottom {
  margin-bottom: 2.75rem;
}
img {
  width: 1.75rem;
  height: 1.75rem;
}
#my-three {
  position: absolute;
  width: 100%;
  height: 100%;
}
@function pxToVw($num) {
  //100vw:当前屏幕宽度
  //375:以屏幕宽度为375px为准
  //$num:需要设定的px值
  //计算：屏幕宽度100vw为375 $num:1 转换为1px（转换精度会有细微误差）
  @return 100vw / 1024 * $num;
}
.logo {
  cursor: pointer;
}

.left {
  padding-left: 20px;
  padding-top: 20px;
  height: 100%;
  overflow: hidden;
  max-width: 1000px;
  min-width: 300px;
}
.text {
  position: relative;
  color: #ffffff;
  opacity: 0.7;
  transition: all 0.5s;
  animation: textframes 0.2s linear;
  font-size: 20px;
  left: 0;
  opacity: 1;
  word-wrap: break-word;
  max-width: 1000px;
  table-layout: fixed;
  word-wrap: break-all;
  word-break: normal;
  overflow: hidden;
  min-width: 300px;
}
.image {
  cursor: pointer;
  width: 100%;
}
.carousel {
  position: absolute;
  width: 100%;
  animation: carousel 0.3s linear;
}
.carousela {
  position: relative;
  width: 1000px;
  height: 300px;
}

@for $i from 1 through 10 {
  .text:nth-child(#{$i}) {
    animation-delay: #{$i * 0.2}s;
    animation: textframes #{$i * 0.12}s linear;
  }
}
@keyframes carousel {
  0% {
    top: -100px;
  }
  100% {
    top: 0px;
  }
}

@keyframes textframes {
  0% {
    left: -100px;
    opacity: 0;
  }

  100% {
    left: 0px;
    opacity: 1;
  }
}

.logBox {
  position: relative;
  width: 600px;
  min-width: 350px;
  height: 100%;
}
.titles {
  position: absolute;
  left: -50;
  top: 0;
}

.titles {
  position: absolute;
  left: 50;
  top: 0;
}
.login {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  // background-color: red;
  background-image: url("../assets/bglogin.jpg");
  // background: linear-gradient(to right, #23272e, #0a7ae2, #23272e);
  background-size: cover;
}
.title {
  width: 96px;
  height: 24px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 44px;
  margin-bottom: 33px;
}

// @keyframes login-form {
//   0% {
//     height: 2px;
//     right: -50%;
//   }
//   25% {
//     right: 0%;
//     height: 0px;
//   }
//   50% {
//   }

//   100% {
//     height: 310px;
//   }
// }

.login-form {
  // position: absolute;
  // right: 0%;
  // top: 40%;
  background: #ffffff;
  animation: login-form 1s;
  height: 25rem;
  width: 14.9375rem;
  width: 34.375rem;
  height: 27.5rem;
  overflow: hidden;
  border-radius: 8px;
  padding: 25px;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}

.login ::v-deep .el-tabs__nav-scroll {
  width: 50%;
  margin: 0 auto;
}
.inputButton {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .CodeButton {
    margin-left: 10px;
  }
}
.iponeimg {
  width: 2.5rem;
  height: 2.5rem;
}
</style>
